<template>
  <div class="head">
      <span class="iconfont icon-xiaomi"></span>
      <div>
        <span class="iconfont icon-ziyuan"></span>
        <input type="text" name="" id="" placeholder="搜索商品名称">
      </div>
      <span class="iconfont icon-tubiaolunkuo-"></span>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.head{
    height: 44px;
    display: flex;
    align-items: center;
    .icon-xiaomi{
      width: 52px;
      color: #FF6B00;
      font-size: 25px;
      text-align: center;
    }
    div{
      display: flex;
      align-items: center;
      flex: 1;
      height: 33px;
      background: white;
      .icon-ziyuan{
        width: 31px;
        text-align: center;
      }
      input{
        flex: 1;
        border: none;
        font-size: 17px;
        color: #757575;
        outline: none;
      }
    }
    .icon-tubiaolunkuo-{
      width: 52px;
      text-align: center;
      font-size: 20px;
      color: #676767;
      font-weight: 600;
    }
}
</style>